<script>
// 高阶组件: 把一个组件当成参数传给另一个组件 在组件内部你可以做好多事
// 最后再返回一个新的组件
export default {
  props: {
    // 按钮的权限标识数据 要控制谁 就把他的标识传入
    btnPerm: {
      type: String,
      default: ''
    }
  },

  // eslint-disable-next-line vue/require-render-return
  render(h) {
    // 如何获取父组件传过来的待显示的按钮组件?
    // 如何在render 中获取插槽模板?
    // template  slot 接受插槽参数
    // render  this.$slots.插槽的名称

    // 获取当前用户下所有的权限标识
    const permsList = this.$store.state.user.userProfile.permissions

    // 判断props 传入的当前按钮的权限标识 this.btnPerm 是否在当前用户的权限列表中Permissions 找到
    // 如果能找到 则正常返回按钮组件 如果找不到 则什么都不返回
    const hasPerm = permsList.includes(this.btnPerm)
    // 如果 hasPerm 为 true 代表找到了  显示出来传入的要显示的 button 组件
    return hasPerm && this.$slots.defalut
  }

}
</script>
<style scoped lang="scss">
</style>
